<template>
  <div v-text="msg"> </div>
  <div v-html="msg1" class="dv1"> </div>
  <button @click="showInfor" > 点击按钮更换图片</button>
<p v-show="flag"><img :src="url" /></p> 
姓名是:<input type:="text" v-model.lazy="username"/>
   <div>以上是 {{username}} 完成的效果</div>
   <!-- 6 -->
     <p v-if="type=='A'">翟利辉2430150127</p>
     <p v-else-if="type=='B'">翟利辉</p>
     <button @click="tran">点击按钮</button>
     <!-- 7 -->
<button @click="flag = !flag">隐藏图片</button>
<!-- 8 -->
 <p v-for="(item, index) in arr" :key="index">
  序号：{{ index+1 }} --- 内容：{{ item }}
  </p>
</template>
<script setup>
const msg="内置指令";
const msg1="<strong>这是翟利辉的加粗页面</strong>";
import { ref } from 'vue';
const url = ref(new URL('../assets/img1.png', import.meta.url).href)
//4
const showInfor=()=>{
url.value = new URL('../assets/img2.png', import.meta.url).href;
};
//5
const username = ref("");
//6
let type =ref('B');
function tran() {
  type.value = "A";
}
//7
const flag = ref(true);
//8
const arr = ["v-text","v-html","v-bind","v-on","v-model","v-if","v-show","v-for"];
</script>
<style>
.dv1{
    color:blue;
}
</style>